<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>培训管理</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/attend/m/common.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/eleTree.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <script src="/lib/layui/layui/layui.js"></script>
    <link rel="stylesheet" href="/lib/layui/layui/css/eleTree.css">
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <link rel="stylesheet" href="/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js/"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/ui/js/course/course.js?20200729"></script>
    <style>
        html,body{
            width:100%;
            height:99%;
        }
        .layui-card-header{
            border-bottom: 1px solid #eee;
        }
        .mbox{
            /*padding: 8px;*/
            height:98%;
        }
        .inbox{
            padding: 5px;
            padding-right: 30px;
        }
        .deptinput{
            display: inline-block;
            width: 75%;
        }
        .layui-btn{
            margin-left: 10px;
        }
        .layui-btn .layui-icon{
            margin-right: 0px;
        }
        .layui-card{
            box-shadow:none
        }
        .red{
            color: red;
            font-size: 16px;
        }
        .layui-form-label{
            padding: 8px 15px;
        }
        .layui-card-body{
            display: flex;
        }
        .layui-lf{
            width: 255px;
            overflow-x: auto;
            height: 600px !important;
        }
        .layui-rt{
            width: calc(100% - 255px);
            margin-left: 28px;
            margin-top: -10px;
            background: #ffffff;
        }
        .treeTitle{
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 30px;
            background-color: #00a0e9;
            color: #fff;
            padding: 15px;
            position: relative;
        }
        .layui-nav-item,.layadmin-flexible{
            position: absolute;
            left: 5px;
            top: 23px;
            z-index: 9999999;
        }
        .rtfix{
            overflow-y: auto;
        }
        .bg{
            background-color: #F2F2F2;
        }
        .bgs{
            background-color: #F2F2F2;
        }
        /*滚动条样式*/
        .rtfix::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .rtfix::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        .rtfix::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);}
        .eleTree{
            cursor: pointer;
        }
        .layui-table-view .layui-table td, .layui-table-view .layui-table th{
            padding: 3px 0;
        }
        .layui-tab-title{
            height: 35px;
        }
        .layui-tab-title li{
            height: 36px;
            margin-top: -5px;
        }
        .layui-tab layui-tab-card{
            margin-top: -4px;
        }
        .layui-tab-card>.layui-tab-title .layui-this:after {
            border-width: 0px;
        }
        .baseinfo td{
            padding: 5px 2px;
        }
        .active{
            display: none;
        }
        .layui-inline{
            width:47%;
        }
        .layui-form-label{
            width:125px;
        }
        #search .layui-inline{
            width:41%;
        }
        #search .layui-form-label{
            width:70px;
        }
        .courseName{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 40px;
            font-size: 14px;
            margin-bottom: 6px;
            position: relative;
        }
        .cour:hover {
            border-color: #ddd!important;
            box-shadow: 1px 1px 2px 1px #ececec;
        }
        /*@media screen and (min-width:1367px){*/
        /*#one,#two{*/
        /*width:1325px;*/
        /*margin:0 auto;*/
        /*}*/
        /*}*/
        /*@media screen and (max-width:1366px){*/
        /*#one,#two{*/
        /*width:806px;*/
        /*margin:0 auto;*/
        /*}*/
        /*}*/

        .text{
            text-align: center;
            width: 100%;
            font-size: 24px;
            line-height: 39px;
            margin: 5px auto 10px auto;
        }
        .jianjie{
            width:100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .Img{
            margin-top: 37px;
            margin-left: 30px;
        }
        .txt{
            color: #fff;
            font-size: 14px;
            display: inline-block;
            margin-left: 20px;
        }
        .counts{
            width: 360px;
            height: 150px;
            margin: 100px auto;
            background-color: #357ece;
            border-radius: 10px;
            box-shadow: 3px 3px 3px #2F5C8F;
            overflow: hidden;
        }

    </style>

</head>
<body style="">
<div class="layui-card" style="text-align: center;margin: auto;padding: 10px;    height: 99%;">
    <div class="layui-tab" lay-filter="tab" style="    height: 99%;">
        <ul class="layui-tab-title">
            <li class="layui-this">线上课程</li>

            <li id="offlineCourses">线下课程</li>
        </ul>
        <div class="layui-tab-content" style="background: #f2f2f2;height:95%">
            <div class="layui-tab-item one layui-show" style="height: 100%;">
                <div class="layui-card" style="height: 100%">
                    <div class="layui-card-body" style="padding-left: 6px;">
                        <div class="layui-lf rtfix">
                            <div class="treeTitle" id="equip" dataType="0" >课程阶段

                            </div>
                            <%--<div id="test1"></div>--%>
                            <div class="panel-body" style="height:calc(100% - 50px)">
                                <%--<div id="test9" class="demo-tree demo-tree-box"></div>--%>
                                <div class="eleTree ele1" lay-filter="data1" ></div>
                            </div>
                        </div>
                        <div class="layui-rt">
                            <div class="text">请选择课程阶段</div>
                            <div id="one"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item" style="    height: 100%;">
                <div class="layui-card" style=" height: 100%;">
                    <div class="layui-card-body" style="padding-left: 6px;">
                        <div class="layui-lf rtfix">
                            <div class="treeTitle" id="equip" dataType="0" >课程阶段

                            </div>
                            <%--<div id="test1"></div>--%>
                            <div class="panel-body" style="height:calc(100% - 50px)">
                                <%--<div id="test9" class="demo-tree demo-tree-box"></div>--%>
                                <div class="eleTree ele1" lay-filter="data1" ></div>
                            </div>
                        </div>
                        <div class="layui-rt" >
                            <div class="text">驻场人员入职培训课程表（一阶段）</div>
                            <div id="two"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="barOperation">



</script>
<script type="text/html" id="entrys">
    {{#  if(d.enrollStat == '0'){ }}

    未学习


    {{# }else{  }}

    已学习

    {{# } }}
</script>


<script type="text/javascript">
    $(function () {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || /(Android)/i.test(navigator.userAgent)) {
            window.location.replace('/train/navigation');
        }
    })
    var videoAddress
    var dataType=0;

    function all(id) {
        $.ajax({
            url: '/trCourse/showAllByCourseStage',
            type: 'get',
            data:{courseStage: id,
                page:1,
                liimt:100
            },
            dataType: 'json',
            success: function (res) {
                if(res.msg == "暂无数据"){
                    $('.text').hide()
                    var app= '<div class="counts">\n' +
                        '        <div class="Img">\n' +
                        '            <img src="../img/sys/icon64_info.png" alt="">\n' +
                        '            <span class="txt">请选择课程阶段</span>\n' +
                        '        </div>\n' +
                        '    </div>'
                    $('#one').html(app)
                }else{
                    $('.text').show()
                    var str = ""
                    for (var i = 0; i < res.data.length; i++) {
                        if(res.data[i].attachmentList.length>0) {
                            str += ' <div class="layui-card"  style="display: inline-block;width: 244px;padding: 7px 7px 10px;\n' +
                                '    border: 1px solid transparent;'+function () {
                                    if(res.data[i].studyType=='1'){
                                        return 'background:ghostwhite;'
                                    }
                                }()+'">\n' +
                                '<img class="cour" studyType="'+res.data[i].studyType+'" id="' + res.data[i].courseId +'" courseType="'+res.data[i].courseType+'" src="/xs?' + res.data[i].attachmentList[0].attUrl + '" style="width: 100%;height: 145px;cursor: pointer;"    onerror="imgOnerror(this)" />\n' +
                                ' <h3 class="courseName" style="color:#333;font-size:16px;margin-top:5px;margin-bottom: 0;">' + res.data[i].courseName +
                                '</h3>\n' +
                                '<div style="font-size:12px;color: #9199a1;">讲师：' + res.data[i].courseLecturer + '</div>' +
                                '<div class="item-line item-line--middle">  ' + function(){
                                    if(res.data[i].learningTime!=undefined){
                                        return '<span class="line-cell item-task" style=" color: #999;font-size:12px;padding-right:0px;display: block">要求学习时长:<span style="color:red;font-size:13px;font-weight:bold">'+res.data[i].learningTime+'</span>分钟 </span>  '
                                    }else{
                                        return '<span class="line-cell item-task" style=" color: #999;font-size:12px;padding-right:0px;border-right:1px solid #999">要求学习时长:<span style="color:red;font-size:13px;font-weight:bold">0</span>分钟 </span>  '
                                    }

                                }()  +function(){
                                    if(res.data[i].studyTime!=undefined){
                                        return '<span class="line-cell item-task item-taskYi" style=" color: #999;padding-left:1px;font-size:12px">已学习时长: <span style="color:red;font-size:13px;font-weight:bold">'+res.data[i].studyTime+'</span>分钟   </span> '
                                    }else{
                                        return '<span class="line-cell item-task" style=" color: #999;padding-left:1px;font-size:12px">已学习时长: <span style="color:red;font-size:13px;font-weight:bold">0</span>分钟   </span> '
                                    }
                                }()+
                                '<div class="play" studyType="'+res.data[i].studyType+'" id="' + res.data[i].courseId +'" style="margin-top: -9px;margin-right: 4px;float: right"><i class="layui-icon layui-icon-play" style="font-size: 28px;"></i></div>\n'+
                                '</div>'+
                                '</div>'
                        }
                    }
                    $('#one').html(str)
                }
            }
        })
    }

    function bixiu(oprea,ids,courseCategory){
        $.ajax({
            url:'/course/showAlls',
            type:'get',
            data:{oprea:oprea,
                CourseState: 1,
                courseCategory:courseCategory
            },
            dataType:'json',
            success:function(res){
                var str=""
                for(var i =0;i<res.data.length;i++){
                    var attUrl = res.data[i].attachmentList[0].attUrl
                    str += ' <div class="layui-card" id="' + res.data[i].courseId + '" style="display: inline-block;width: 30%;">\n' +
                        '                <img src="/xs?' + res.data[i].attachmentList[0].attUrl + '" width="100%" height="250" />\n' +
                        '                <p><span class="courseName">' + res.data[i].courseName + '</span><span style="float:right">报名时间:<span class="timer">'+res.data[i].enrollTime+'</span></span></p>\n' +
                        '                <div style="width:100%;height:50px;overflow: hidden;"><p style="color: gray;margin-top: 10px" class="ping" star="'+res.data[i].star+'" id="ping'+i+'"></p>\n' +function () {
                            if (res.data[i].enroll === '1') {
                                return '                <button disabled type="button" class="layui-btn layui-btn-sm layui-btn-disabled     baoming     enroll">报名</button></div>\n';
                            }else {
                                return '                <button type="button" class="layui-btn layui-btn-sm     baoming     enroll">报名</button></div>\n'
                            }
                        }()+'            </div>'
                }

                $(ids).html(str)

            }
        })
    }

    function checkTime(start,end,thisTime){
        if(start==''){
            var startTime = 0
        }else{
            var startTime = new Date(start.replace('-','/')).getTime()||0;
        }
        if(end==''){
            var endTime = 0
        }else{
            var endTime = new Date(end.replace('-','/')).getTime()||0;
        }

        var thisTime = new Date(thisTime.replace('-','/')).getTime()||0;
        if(Number(startTime)<=Number(thisTime)&&Number(thisTime)<=Number(endTime)){
            return true;
        }else{
            return false;
        }
    }
    //处理图片加载不出来时，设置该图片为默认图片
    /*function errorImg(e){
     e.attr('src','/xs?AID=770&MODULE=train&COMPANY=xoa1016&YM=1911&ATTACHMENT_ID=1053325982&ATTACHMENT_NAME=');
     }*/

    <%--全部课程--%>
    $('.layui-tab-item').on('click','.cour',function(){
        var text  = $(this).find('.courseName').text();
        if($(this).attr('studyType')=='1'){
            layer.msg('学习时间已截止！', { icon:6});
        }else{
            var id = $(this).attr('id')
            var courseType = $(this).attr('courseType')
            window.location.href = '/course/courseIntroduction?id='+id+'&courseType='+courseType
        }
    })
    function getQueryString(name2){
        // var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        // var r = window.location.search.substr(1).match(reg);
        // if(r!=null)return  unescape(r[2]); return null;
        // ":/trCourse/showDetils?courseId=91&_=1598867695813"
        var reg = name2.split('?')
        var r = reg[1]
        var reg2 = r.split('&')
        var r2 = reg2[0]

        var reg3 = r2.split('=')
        var r3 = reg3[1]
        console.log(r3)
        return r3
    }


    $('.layui-tab-item').on('click','.play',function(){
        if($(this).attr('studyType')=='1'){
            layer.msg('学习时间已截止！', { icon:6});
        }else{
            $.ajax({
                url:'/trCourse/showDetils',
                data:{courseId:$(this).attr('id')},
                type:'get',
                dataType:'json',
                success:function(res) {
                    var startTime=''
                    var endTime = ''
                    var data={}
                    startTime = new Date().Format('hh:mm:ss')
                    endTime = new Date().Format('hh:mm:ss')
                    data.studyTimeSum = startTime
                    data.studyTimeNew = endTime
                    data.type=1


                    var name = $(this)
                    var name2=name[0].url
                    var certId = getQueryString(name2);
                    data.courseId = certId
                    // data.courseId=$(this).attr('id')
                    var path=res.object.videoAddress
                    layer.open({
                        type: 1,
                        area:['900px','90%'],
                        title:'视频播放',
                        maxmin:true,
                        content: '<iframe allowfullscreen="true" frameborder="0" allowtransparency="true" style="width:100%;height:100%" src="'+path+'"></iframe>',
                        success:function(){
                            $('.layui-layer-close').click(function(){
                                endTime = new Date().Format('hh:mm:ss')
                                data.studyTimeSum = startTime
                                data.studyTimeNew = endTime
                                detail(data)
                            })
                        }
                    });
                }
            })

        }
    })

    function detail(data){
        $.ajax({
            url:'/trCourseSchedule/addtrStudyRecord',
            type:'post',
            data:data,
            dataType:'json',
            success:function(res){
                all()
            }
        })
    }
    //点击报名
    $('.layui-tab-item').on('click','.baoming',function(e){
        e.stopPropagation();
        var id  = $(this).parents('.layui-card').attr('id');
        var date = new Date().Format('yyyy-MM-dd');
        var time = $(this).parent().prev().find('.timer').text();
        var arr = time.split('~')

        if(checkTime(arr[0],arr[1],date)){

            $.ajax({
                url:'/signUp/add',
                data:{courseId:id},
                type:'post',
                dataType:'json',
                success:function(res){
                    $.ajax({
                        url:'/course/addStudy',
                        data:{courseId:id},
                        type:'post',
                        dataType:'json',
                        success:function(res){
                        }
                    })
                    layer.msg(res.msg,{icon:1},function () {
                        window.location.href = '/course/courseIntroduction?id='+id
                    });/*添加成功*/
                }
            })
        }else{
            $.layerMsg({content:'请在报名时间段内报名',icon:2})
        }



    })
    //线下课程
    function xianxia(id){
        $.ajax({
            url: '/trCourseSchedule/showAllAndCourse',
            data:{courseStage:id},
            type: 'get',
            dataType: 'json',
            success: function (res) {
                var str = ""
                if(res.msg == "err"){
                    $('.text').hide()
                    str = '<div class="counts">\n' +
                        '        <div class="Img">\n' +
                        '            <img src="../img/sys/icon64_info.png" alt="">\n' +
                        '            <span class="txt">请选择课程阶段</span>\n' +
                        '        </div>\n' +
                        '    </div>'
                }else{
                    $('.text').show()
                    for (var i = 0; i < res.data.length; i++) {
                        if(res.data[i].attachmentList.length>0){
                            str += ' <div class="layui-card cour" id="' + res.data[i].courseId + '" courseType="'+res.data[i].courseType+'" style="display: inline-block;width: 244px;    padding: 7px 7px 10px;\n' +
                                '    border: 1px solid transparent;">\n' +
                                '<img src="/xs?' + res.data[i].attachmentList[0].attUrl + '" width="100%" height="145" onerror="errorImg($(this))"/>\n' +
                                ' <h3 class="courseName" style="color:#333;  min-height: 10px;font-size:16px;margin-top:5px;margin-bottom:-1px">' + res.data[i].courseName +

                                '</h3>\n' +
                                '<div style="font-size:12px;color: #9199a1;">讲师：' + res.data[i].courseLecturer + '</div>' +
                                '<div class="item-line item-line--middle jianjie">  ' + res.data[i].courseIntroduce  +
                                '</div>'+
                                '</div>'
                        }

                    }
                }



                $('#two').html(str)

            }
        })
    }


    $(function(){
        layui.use(['element','eleTree','rate','table'], function () {
            var $ = layui.jquery
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            var layer = layui.layer;
            var rate = layui.rate;
            var table = layui.table;
            var eleTree = layui.eleTree;
            all();

            // 初始化渲染 树形菜单
            el = eleTree.render({
                elem: '.ele1',
                showLine:true,
                // url:'/equipmentType/showParentEquipmentType',
                url:'/trCourseStage/showParent',
                lazy: true,
                load: function(data,callback) {
                    // console.log(data)
                    // $.post('/equipmentType/showChildEquipmentType?equipTypeId='+data.id,function (res) {
                    $.post(' /trCourseStage/showChild?courseStage='+data.courseStage,function (res) {
                        callback(res.data);//点击节点回调
                    })
                },
                done:function (data) { //渲染完成回调
                    aldata = data.data
                }
                ,highlightCurrent: true,
            });
            // 节点点击事件
            eleTree.on("nodeClick(data1)",function(d) {

                var obj = d.data.currentData
                var pid = obj.equipTypePid;
                var courseStage = obj.courseStage
                parentId=obj.courseStage;
                var text = obj.label;
                $('.text').html(text)

                if(dataType==0){
                    all(courseStage)
                }else{
                    xianxia(courseStage)
                }


            });

            element.on('tab(tab)', function (elem) {
                var index = elem.index;
                if(index==0){
                    dataType = 0
                    $('.text').html('驻场人员入职培训课程表（一阶段）')
                    all('')

                }else if(index == 1){

                    dataType = 1
                    $('.text').html('驻场人员入职培训课程表（一阶段）')
                    //changyong()
                    xianxia('')
                }

            });

        });
        var type =  $.getQueryString("type") || '';
        if(type == 1){
            $('#offlineCourses').click().addClass('layui-this').siblings().removeClass('layui-this');
            $('.layui-tab-item').eq(1).addClass('layui-show').siblings().removeClass('layui-show');
            $('.text').html('驻场人员入职培训课程表（一阶段）')
            dataType =1;
            xianxia('')
        }
    })
    function imgOnerror(img)
    {
        //图片加载错误时，加载默认图片
        img.src = "../ui/img/class.png";
    }
</script>

</body>


</html>